<!-- 
  之前所有知识点综合练习案例 - 成绩管理demo
-->
<script setup>
    import {ref,computed} from "vue"

    // 成绩列表
    const scoreList = ref([
      {id: 1, subject: "导弹维修", score: 12},
      {id: 2, subject: "Java程序开发", score: 77},
      {id: 3, subject: "Vue前端框架", score: 60},
      {id: 4, subject: "MySQL数据库基础", score: 80},
      {id: 5, subject: "JavaSE数据结构", score: 32},
      {id: 6, subject: "网络编程", score: 67},
    ])

    // 新科目
    const newSubject = ref("")

    // 新分数
    const newScore = ref("")

    // 总分
    const total = computed(() => {
      return scoreList.value.reduce((prev, current) => {
        return prev + current.score
      }, 0)
    })

    // 平均分
    const average = computed(() => {
      return scoreList.value.length === 0 ? 0 : (total.value / scoreList.value.length).toFixed(2)
    })

    // 当前点击
    const currentClick = ref("")

    // 处理新增事件
    const onSubmit = () => {
      // 参数校验
      if(newSubject.value === "" || newScore.value === "") {
        // 错误提示
        return alert("科目或分数不能为空！")
      }
      // 新增至列表
      scoreList.value.push({
        id: Date.now(),
        subject: newSubject.value,
        score: newScore.value
      })
      // 置空表单
      newSubject.value = ""
      newScore.value = ""
    }

    // 处理删除事件
    const onDelete = (i) => {
      // 询问
      if(confirm("确认删除吗？")){
        scoreList.value.splice(i, 1)
      }
    }
</script>

<template>
  <div class="container">
    <div class="left-box">
      <table>
        <thead>
          <tr>
            <th style="width: 60px;">编号</th>
            <th style="width: 300px;">科目</th>
            <th style="width: 60px;">成绩</th>
            <th style="width: 60px;">操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item, index in scoreList" 
          :key="item.id"
          @click="currentClick = index"
          :class="{'current-click': currentClick === index}">
            <td>{{ index + 1 }}</td>
            <td>{{ item.subject }}</td>
            <td :class="{fail: item.score < 60}">{{ item.score }}</td>
            <td><a href="#" @click="onDelete(index)">删除</a></td>
          </tr>
          <tr v-if="scoreList.length === 0">
            <td colspan="4" class="empty">
              暂无数据
            </td>
          </tr>
          <tr>
            <td colspan="4">
              <!-- 此处存在隐患，当分数长度变更时，此处可能会动 -->
              <span style="padding-right: 60px;">
                总分：{{ total }}
              </span>
              <span>
                平均分：{{ average }}
              </span>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="right-box">
      <table>
        <tr>
          <td>
            <label for="subject">科目：</label>
          </td>
          <td>
            <input id="subject" 
            type="text" 
            placeholder="请输入科目" 
            v-model="newSubject">
          </td>
        </tr>
        <tr>
          <td>
            <label for="score">分数：</label>
          </td>
          <td>
            <input id="score" 
            type="number" 
            placeholder="请输入分数" 
            v-model="newScore">
          </td>
        </tr>
        <tr>
          <td></td>
          <td>
            <button @click="onSubmit">添加</button>
          </td>
        </tr>
      </table>
    </div>
  </div>
</template>

<style scoped lang="scss">
  .container {
    display: flex;
    width: 750px;
    margin: 250px auto;
    .right-box {
      width: 270px;
      font-size: 14px;
      box-sizing: border-box;
      padding-top: 12px;
      padding-left: 12px;
      // tr元素属于块级行内元素，设置margin属性默认是不生效的，当时我们可以设置td的padding属性
      table tr:nth-child(2) td {
        padding: 12px 0;
      }
      input {
        width: 175px;
        height: 28px;
        outline: none;
      }
      button {
        height: 25px;
        width: 46px;
        border: none;
        border-radius: 2px;
        background-color: rgb(46, 120, 224);
        color: #fff;
      }
    }
    .left-box {
      table {
        border-collapse: collapse;
        td, th {
          border: solid 1px #bbb;
          text-align: center;
          font-size: 14px;
          padding: 6px 0;
        }
        th {
          background-color: rgb(211, 211, 211 );
        }
        // 样式绑定
        .fail {
          color: red;
        }
        .current-click {
          background-color: rgb(238, 238, 238)
        }
        .empty {
          height: 72px;
          background-color: rgb(238, 238, 238)
          ;
        }
      }
    }
  }

</style>